<template>
  <div class="banner-item">
    <div v-if="navigator === 'mobile'" class="h5">
      <h1 class="d-title grey">{{ componentData.titleEn }}</h1>
      <h1 class="d-title mg-b-60">{{ componentData.titleZh }}</h1>
    </div>
    <div v-else class="pc">
      <h1 class="d-title grey">{{ componentData.titleEn }}</h1>
      <h1 class="d-title mg-b-60">{{ componentData.titleZh }}</h1>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    componentData: {
      type: Object,
      default: () => ({}),
    },
    // 设备型号
    navigator: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
  computed: {},
  methods: {},
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.banner-item {
  .h5 {
    position: relative;
    height: 90px;
    background-color: #fff;

    .d-title {
      font-size: 18px;
      font-weight: bold;
      line-height: 20px;
      color: #333;
      text-align: center;
    }

    .grey {
      color: #b0b7bd;
      text-align: center;
      padding: 24px 0 0 0;
    }
  }

  .pc {
    background-color: #fff;
    border: 1px dashed #e0e4ec;
    position: relative;
    overflow: hidden;

    .d-title {
      .ft(30);
      .lineH(30);

      text-align: center;
      color: #333;
    }

    .grey {
      color: #b0b7bd;
      text-align: center;
      .pd(60, 0, 0, 0);
    }

    .mg-b-60 {
      .mg(0, 0, 60, 0);
    }
  }
}
</style>
